<template>
  <div class="treetools" style="width: 100%">
    <el-row style="width: 100%" type="flex" justify="space-between">
      <el-col class="left"><i class="el-icon-sugar"></i>{{ item.name }}</el-col>
      <el-col class="right">
        <div style="text-align: right">
          <span>{{ item.manager }}</span>
          <el-dropdown class="mydown" @command="mycommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="one">添加子部门</el-dropdown-item>
              <el-dropdown-item command="two" v-if="!istop">查看部门</el-dropdown-item>
              <el-dropdown-item command="three" v-if="!istop">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//导入删除组织架构接口
import { delDepartmentapi } from "@/api/departments";
export default {
  //title:左侧的内容
  //isTop : 是否是公司部门
  props: ["item", "istop"],
  methods: {
    //点击下拉组件中的元素时会触发的事件
    async mycommand(command) {
      if (command === "three") {
        try {
          //删除部门
          //询问是否删除
          await this.$confirm("是否删除当前部门,警告");
          //请求接口
          await delDepartmentapi(this.item.id);
          //提示
          this.$message.success("删除成功");
          // 更新数据（只需要在父组件中再次调用获取组织架构的数据就 okey 了）
          // 调用父组件中的方法（子传父）
          this.$emit("refresData");
        } catch {
          console.log("取消删除");
        }
      } else if (command === "one") {
        //打开新增面板
        this.$emit("changeAddshow", this.item);
      } else {
        //打开编辑面板,编辑面板与新增面板是同一个
        this.$emit("changeEditShow", this.item);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.treetools {
  .left {
    font-weight: 700;
    font-size: 18px;
    i {
      margin-right: 8px;
    }
  }
  .right {
    font-size: 18px;
    .mydown {
      margin-left: 20px;
      font-size: 18px;
    }
  }
}
</style>
